<template>
    <el-card shadow="never" style="margin-bottom: var(--card-space);">
        <el-form :inline="true" :model="searchData">

            <el-form-item label="等级状态">
                <el-select v-model="searchData.is_show" placeholder="请选择等级状态" clearable style="width: 250px;">
                    <el-option label="显示" value="1" />
                    <el-option label="不显示" value="0" />
                </el-select>
            </el-form-item>

            <el-form-item label="等级名称">
                <el-input v-model="searchData.name" placeholder="请输入等级名称" clearable style="width: 250px;" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <BaseCard>
        <BaseTable :data="tableData.rows" :columns="columns" :total="tableData.total" v-model:page-data="pageData">
            <template #toolbar>
                <el-button type="primary" @click="gradeFormRef?.openDialog()">
                    添加用户等级
                </el-button>
            </template>

            <template #icon="{ row }">
                <img :src="row.icon" height="40px">
            </template>
            <template #bg_image="{ row }">
                <img :src="row.bg_image" height="40px">
            </template>
            <template #is_show="{ row }">
                <el-switch v-model="row.is_show" :active-value="1" :inactive-value="0" @change="updateUserGroup(row)" />
            </template>
            <template #action="{ row }">
                <el-dropdown @command="onHandleCommand">
                    <span class="el-dropdown-link">
                        更多
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item :command="{ _id: row._id, action: 'update' }">编辑等级</el-dropdown-item>
                            <el-dropdown-item :command="{ _id: row._id, action: 'delete' }">删除等级</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </template>
        </BaseTable>
    </BaseCard>

    <GradeForm @findUserGrade="findUserGrade" ref="gradeFormRef" />
</template>

<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import { deleteUserGradeApi, findUserGradeApi, updateUserGradeApi } from '@/api/userGrade';
import { onMounted, reactive, ref, useTemplateRef, watch } from 'vue';
import GradeForm from './GradeForm.vue';

const tableData = reactive({
    rows: [],
    total: 0
});
const pageData = ref({ currentPage: 1, pageSize: 10 });
const searchData = ref({ is_show: '', name: '' });
const gradeFormRef = useTemplateRef<any>('gradeFormRef')

const columns = [
    { label: 'ID', prop: '_id', width: 220 },
    { label: '等级名称', prop: 'name' },
    { label: '等级图标', prop: 'icon' },
    { label: '等级背景图', prop: 'bg_image' },
    { label: '等级值', prop: 'grade' },
    { label: '经验值', prop: 'exp' },
    { label: '等级折扣', prop: 'discount' },
    { label: '是否显示', prop: 'is_show' },
    { label: '操作', prop: 'action', width: 100 },
]

onMounted(() => {
    findUserGrade();
})

// 用户每一次在页面进行分页操作时，都会触发侦听器
watch([pageData], () => {
    findUserGrade();
}, { deep: true })

async function findUserGrade() {
    const res = await findUserGradeApi({
        ...pageData.value,
        ...searchData.value
    });
    if (res.code == 200) {
        tableData.rows = res.data.rows;
        tableData.total = res.data.total;
    }
}

async function updateUserGroup(updateItem: any) {
    // 发请求修改数据库中的数据
    if (updateItem._id) {
        const res = await updateUserGradeApi(updateItem);
        if (res.code == 200) {
            ElMessage({
                type: 'success',
                message: '显示状态修改成功'
            })
        } else {
            ElMessage.error(res.message);
        }
        // 重新发请求获取数据库中最新的数据 
        findUserGrade();
    }
}

async function deleteUserGroup(_id: string) {
    const res: any = await deleteUserGradeApi({ _id });
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: '用户等级删除成功'
        })
        // 重新发请求获取数据库中最新的数据 
        findUserGrade();
    } else {
        ElMessage.error(res.message);
    }
}

// 点击表格中【更多】下拉菜单时触发的方法
function onHandleCommand(command: { _id: string, action: string }) {
    if (command.action === 'delete') {
        deleteUserGroup(command._id);
    }
    if (command.action === 'update') {
        // 调用子组件的方法，打开子组件弹窗
        gradeFormRef.value?.openDialog(command._id);
    }
}

function onSearch() {
    findUserGrade();
}



</script>

<style scoped>
.el-form-item {
    margin-bottom: 0;
}
</style>